﻿@section head{
    <style>
        .layui-table-tool {
            border-bottom: 1px solid lightgray !important;
        }

        .pre-warn {
            color: red;
            font-size: xx-small;
            display: inline-block;
        }
    </style>
}
<body class="pear-container">
    <table id="listener"></table>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">增加</button>
          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="strat">开启SOCKET服务</button>
          <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="stop">停止SOCKET服务</button>
          <pre class="pre-warn">此页面所有操作都会重启SOCKET服务。慎操作！慎操作！</pre>
        </div>
    </script>
    <script type="text/html" id="inlinBar">
        <div class="layui-clear-space">
          <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="save" title="单击单元格修改值，再点击此按钮保存">保存<i class="layui-icon layui-icon-about"></i></a>
          <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="delete">删除</a>
        </div>
    </script>
    <div id="listener-dialog" style="display:none">
        <div class="layui-form" lay-filter="add_form" style="margin: 16px;">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-form"></i>
                    </div>
                    <input type="text" name="ip" value="" lay-verify="required" placeholder="监听IP" lay-reqtext="请填写IP地址" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-form"></i>
                    </div>
                    <input type="text" name="port" value="" lay-verify="required" placeholder="监听端口" lay-reqtext="请填写端口" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add_save">保存</button>
            </div>
        </div>
    </div>
    <script>
        layui.use(function () {
            var table = layui.table;
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;
            table.render({
                elem: '#listener',
                toolbar: '#toolbar',
                defaultToolbar: [],
                page: false,
                url: '/api/data/list.listener',
                method: 'post',
                even: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'id', hide: true, },
                    { field: 'ip', title: '监听IP', edit: 'text' },
                    { field: 'port', title: '监听端口', edit: 'text' },
                    { field: 'netType', title: '监听网络' },
                    { fixed: 'right', title: '操作', toolbar: '#inlinBar' }
                ]]
            });
            table.on('toolbar(listener)', function (obj) {
                var layEvent = obj.event;
                if (layEvent == 'strat') {
                    $.ajax({
                        type: 'post',
                        url: '/api/data/start.listener',
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (rep) {
                            if (rep.code == 0) {
                                layer.msg('启动成功');
                                table.reloadData('listener');
                            }
                        }
                    });
                }
                else if (layEvent == 'stop') {
                    $.ajax({
                        type: 'post',
                        url: '/api/data/stop.listener',
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (rep) {
                            if (rep.code == 0) {
                                layer.msg('停止成功');
                                table.reloadData('listener');
                            }
                        }
                    });

                }
                else if (layEvent == 'add') {
                    var layerIndex = layer.open({
                        type: 1,
                        id: 'add_layer',
                        area: '350px',
                        resize: false,
                        shadeClose: true,
                        title: '增加监听器',
                        content: $('#listener-dialog'),
                        success: function (layero, index, that) {
                            form.render();
                            form.val('add_form',{"ip":"", "port":""});
                            form.on('submit(add_save)', function (obj) {
                                var field = obj.field;
                                $.ajax({
                                    type: 'post',
                                    url: '/api/data/save.listener',
                                    dataType: 'json',
                                    data: JSON.stringify(field),
                                    contentType: 'application/json',
                                    success: function (rep) {
                                        if (rep.code == 0) {
                                            layer.close(layerIndex);
                                            layer.msg('增加成功');
                                            table.reloadData('listener');
                                        }
                                    }
                                });
                                return false;
                            });
                        }
                    });
                }
            });
            table.on('tool(listener)', function (obj) {
                var layEvent = obj.event;
                var rowData = obj.data;
                if (layEvent == 'save') {
                    $.ajax({
                        type: 'post',
                        url: '/api/data/save.listener',
                        data: JSON.stringify(rowData),
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (rep) {
                            if (rep.code == 0) {
                                layer.msg('保存成功');
                                table.reloadData('listener');
                            }
                        }
                    });
                }
                else if (layEvent == 'delete') {
                    $.ajax({
                        type: 'post',
                        url: '/api/data/delete.listener.' + rowData.id,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (rep) {
                            if (rep.code == 0) {
                                layer.msg('删除成功');
                                table.reloadData('listener');
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>